<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="app">
    <anchored-heading :level="1">Hello!</anchored-heading>
    <anchored-heading :level="2">Hello!</anchored-heading>
    <anchored-heading :level="3">Hello!</anchored-heading>
    <anchored-heading :level="4">Hello!</anchored-heading>
    <anchored-heading :level="5">Hello!</anchored-heading>
    <anchored-heading :level="6">Hello!</anchored-heading>
</div>


</body>
<script src="../../vender/vue@2.4.2.js"></script>

<script>
    Vue.component('anchored-heading',{
        template:'#anchored-heading-template',
        props:{
            level:{
                type:Number,
                required:true
            }
        },
        render: function (createElement) {
            return createElement('h'+this.level,this.$slots.default);
        }
    });
    var app=new Vue({
        el:'#app'
    });

</script>
</html>